<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link href="../css/bootstrap.css" rel="stylesheet"/>
  <title>test</title>
  <script src="../js/angular.js"></script>
  <script src="../js/ui-bootstrap-tpls-1.3.2.js"></script>
  <style>
    .uib-alert {
      width: 150px;
      position: relative;
      top: 100px;
      right: 100px;
      /* float: right;*/
    }

    .uib-alert1 {
      position: absolute;
      top: 10px;
      right: 10px;
    }
  </style>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
  <div class="row">
    <form action="#" class="form-horizontal" role="form">
      <div class="col-md-3 form-group">
        <label for="testContent" class="col-sm-2 control-label">测试</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="testContent" placeholder="请输入">
        </div>
      </div>
      <div class="col-md-3 form-group">
        <label for="remark" class="col-sm-2 control-label">备注</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="remark" placeholder="请输入">
        </div>
      </div>
    </form>
    <div class="col-md-2">
      <button class="btn btn-primary" ng-click="select()">查询</button>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="btn btn-primary" ng-click="open()">添加</button>
    </div>
  </div>
  <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
      <h3 class="modal-title">修改</h3>
    </div>
    <div class="modal-body">
      <div class="form-group">
        <label for="test"> 测试内容：</label>
        <input type="text" class="form-control" id="test" placeholder="test" ng-model="article1.test">
      </div>
      <div class="form-group">
        <label for="test"> 备注：</label>
        <input type="text" class="form-control" id="save" placeholder="save" ng-model="article1.save">
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" type="button" ng-click="ok()">提交</button>
      <button class="btn btn-warning" type="button" ng-click="cancel()">取消</button>
    </div>
  </script>
  <table class="table table-striped">
    <tr>
      <th>id</th>
      <th>测试内容</th>
      <th>备注</th>
      <th>操作</th>
    </tr>
    <tr ng-repeat="user in select1">
      <td>{{ user.id }}</td>
      <td>{{user.save}}</td>
      <td>{{user.test}}</td>
      <td>
        <button class="btn btn-warning" ng-click="open(user)">
          <span class="glyphicon glyphicon-pencil">&nbsp;</span>修改
        </button>
        <button class="btn btn-danger" ng-click="deleteId(user.id)"><span
                class="glyphicon glyphicon-trash">&nbsp;</span>删除
        </button>
      </td>
    </tr>
  </table>
  <div class="uib-alert1">
    <uib-alert class="uib-alert" ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)"
               dismiss-on-timeout="1000">{{alert.msg}}
    </uib-alert>
  </div>
  <uib-pagination ng-change="change()" items-per-page="itemsPerPage" total-items="totalItems" ng-model="currentPage"
                  max-size="maxSize" first-text="第一页"
                  previous-text="上一页" next-text="下一页" last-text="最后页" boundary-links="true"
                  boundary-link-numbers="true"></uib-pagination>
</div>

<script>
    //var app = angular.module('myApp', ['ui.bootstrap']);
    angular.module('myApp', ['ui.bootstrap']).controller('myCtrl', function ($scope, $rootScope, $http, $uibModal) {
        $scope.maxSize = 5;
        $scope.totalItems = 5;
        $scope.currentPage = 1;
        $scope.itemsPerPage = 5;
        $scope.show = true;
        $scope.items = ['item1', 'item2', 'item3'];
        $rootScope.select1 = {};
        $rootScope.alerts = [
            /* { type: 'danger', msg: '出错消息' },
             { type: 'success', msg: '成功消息' },
             { type: 'info', msg: '提示消息' },
             { type: 'warning', msg: '警告信息' }*/

        ];
        $scope.article = {save: '', test: ''};
        $scope.article1 = {save: '', test: ''};
        $scope.change = function () {
            $scope.select($scope.currentPage);
        };
        $scope.closeAlert = function (index) {
            $scope.alerts.splice(index, 1);
        };
        $rootScope.select = function (pageNumber = 1) {
            $http({
                url: "/test/pageinate",
                method: "POST",
                data: {
                    "pageNumber": pageNumber,
                    "pageSize": $scope.itemsPerPage,
                    "test":$scope.article1.test,
                    "save":$scope.article1.save
                }
            }).then(function (res) {
                $rootScope.select1 = res.data.data.list;
                $scope.totalItems = res.data.data.totalRow;
                $scope.currentPage = res.data.data.pageNumber;
                // $scope.itemsPerPage= res.data.data.pageSize;
                console.log(res.data.data)
            });
        };
        $rootScope.select();
        $scope.deleteId = function (id) {
            $http({
                method: "GET",
                url: "/test/delete?id=" + id
            }).success(
                function (response) {
                    // 请求成功执行代码
                    $rootScope.alerts.push({type: 'success', msg: '删除成功'});
                    $rootScope.select();
                    console.log(response)
                }
            );
        };
        $scope.open = function (article, size) {
            console.log(article);
            var modalInstance = $uibModal.open({
                templateUrl: 'myModalContent.html',
                controller: 'myModel',
                backdrop: "static",
                size: size,
                resolve: {
                    items1: function () {
                        return $scope.items;
                    },
                    article1: function () {
                        return article;
                    }
                }
            });

            modalInstance.result.then(function (selectedItem) {
                $scope.selected = selectedItem;
            }, function () {
                // $log.info('Modal dismissed at: ' + new Date());
                console.log(new Date());
            });
        };
        $scope.toggleAnimation = function () {
            $scope.animationsEnabled = !$scope.animationsEnabled;
        };
    });
    //$uibModalInstance是模态窗口的实例
    angular.module('myApp').controller('myModel', function ($scope, $rootScope, $http, $uibModalInstance, items1, article1) {
        $scope.items = items1;
        $scope.article = article1;
        $rootScope.selected = {
            item: $scope.items[0]
        };
        $scope.update = function () {
            var ar = $scope.article;
            console.log(ar);
            $http({
                url: '/test/update',
                method: 'post',
                data: article1/*{'id': ar.id, 'save': ar.save, 'test': ar.test}*/
            }).success(function (data) {
                $scope.names = data;
                $rootScope.alerts.push({type: 'success', msg: '更新成功'});
            });
        };
        $scope.insert = function () {
            var ar = $scope.article;
            console.log(ar);
            $http({
                url: '/test/insert',
                method: 'post',
                data: {
                    'save': ar
                }
            }).success(function (data) {
                console.log(data);
                $rootScope.alerts.push({type: 'success', msg: '添加成功'});

            })
        };
        $scope.ok = function () {
            console.log("ok")
            if ($scope.article.id != undefined) {
                $scope.update()
            } else {
                $scope.insert();
            }
            $rootScope.select();
            $uibModalInstance.close($scope.selected.item);
        };

        $scope.cancel = function () {
            $scope.article = {};
            $uibModalInstance.dismiss('cancel');
        };
    });
</script>
</body>
</html>